<template>
  <el-table
    :data="this.tableData"
    max-height="600px"
    row-class-name="row"
    cell-class-name="column"
    :highlight-current-row="true"
    stripe
    :border="border"
    @selection-change="handleSelection"
    :default-sort="{ prop: 'orderNum' || 'date', order: 'descending' }"
    ref="tableRef"
  >
    <el-table-column
      v-if="showSelect"
      align="center"
      type="selection"
      width="120"
    >
    </el-table-column>
    <el-table-column
      :align="item.align ? item.align : 'center'"
      :show-overflow-tooltip="true"
      v-for="(item, index) in tableLabel"
      :key="index"
      :prop="item.prop"
      :width="item.width"
      :label="item.label"
      :sortable="item.sortable"
    >
      <template slot-scope="scope">
        <div v-if="item.isOpera">
          <el-button
            v-if="item.showUpdate"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdated(scope.row)"
            >修改</el-button
          >
          <el-button
            v-if="item.showTableField"
            size="mini"
            type="text"
            icon="el-icon-s-operation"
            @click="handleField(scope.row)"
            >表字段</el-button
          >
          <el-button
            v-if="item.showDel"
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDeleted(scope.row)"
            >删除</el-button
          >
          <el-button
            v-if="item.showView"
            size="mini"
            type="text"
            @click="handleView(scope.row)"
            >查看</el-button
          >
          <el-button
            v-if="item.showDetail"
            size="mini"
            type="text"
            @click="handleDetail(scope.row)"
            >详情</el-button
          >
          <el-button
            v-if="item.showBrowse"
            size="mini"
            type="text"
            @click="handleBrowse(scope.row)"
            >浏览</el-button
          >
          <el-button
            v-if="item.showSwitch"
            size="mini"
            type="text"
            @click="handleSwitchd(scope.row)"
            >开关</el-button
          >
          <el-button
            v-if="scope.row.approveFlag == 0"
            size="mini"
            type="text"
            @click="handleExclude(scope.row)"
            >剔除</el-button
          >
        </div>
        <div class="text" v-else>{{ scope.row[item.prop] }}</div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'index',
  components: {
  },
  props: {
    tableData: { // 父组件传递过来的表格数据
      type: Array,
      default: () => []
    },
    tableLabel: { // 父组件传递过来的表头数据
      type: Array,
      default: () => []
    },
    handleSelectionChange: {
      type: Function,
      default: null
    },
    handleUpdate: {
      type: Function
    },
    handleDelete: {
      type: Function
    },
    handleFieldEvent: {
      type: Function
    },
    handleOperaView: {
      type: Function
    },
    handleOperaBrowse: {
      type: Function
    },
    handleExcludes: {
      type: Function
    },
    handleDetails: {
      type: Function
    },
    border: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data() {
    return {
      selection: []
    }
  },
  methods: {
    handleGoods (row) {
      console.log(row)
    },
    //点击修改
    handleUpdated (row) {
      this.handleUpdate(row)
    },
    // 点击表字段
    handleField (row) {
      this.handleFieldEvent(row)
    },
    // 点击删除
    handleDeleted (row) {
      this.handleDelete(row)
    },
    // 点击复选框
    handleSelection (selection) {
      this.selection = selection;
      this.handleSelectionChange(selection)
    },
    // 查看
    handleView (row) {
      this.handleOperaView(row)
    },
    // 浏览
    handleBrowse (row) {
      this.handleOperaBrowse(row)
    },
    handleExclude(row) {
      this.handleExcludes(row);
    },
    handleDetail(row) {
      this.handleDetails(row);
    }
  },
  computed: {
    showSelect() {
      return this.tableLabel.length > 0 && (this.tableLabel[0].cancelSelection ? false : true)
    }
  },
  created () {
    this.$bus.$on("deled", (data) => {
      this.$refs.tableRef.toggleRowSelection(this.selection[data], false);
    });
  },
  activated() {
    console.log("alive");
  },
  beforeDestroy () {
    this.$bus.$off("deled");
  }
}
</script>

<style scoped>
.text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
::v-deep .el-table::before {
  background-color: unset;
}
::v-deep .el-table {
  overflow: auto;
}
</style>
